<template>
  <nut-cell
    :title="'识别时间：' + state.sqcbHistoryData?.dataTime"
    :desc="state.sqcbHistoryData?.canopies?.canopyName"
    class="van-hairline--bottom"
  >
  </nut-cell>

  <div class="xblock-list">
    <div class="xblock-cell van-hairline--bottom">
      <div class="xblock-cell__title">
        <div>图片详情</div>
      </div>
    </div>
    <div class="xblock-content">
      <img
        class="xblock-content__img"
        :src="
          state.sqcbHistoryData?.resultImage
            ? 'https://fmzk.harvest-code.com/api' + state.sqcbHistoryData?.resultImage
            : dfimage
        "
      />
    </div>
  </div>

  <div class="xblock-list">
    <div class="xblock-cell van-hairline--bottom">
      <div class="xblock-cell__title">
        <div>识别结果</div>
        <div class="xblock-cell__time">{{ state.sqcbHistoryData?.dataTime }}</div>
      </div>
    </div>
    <div class="xblock-content xblock-content__cell" v-if="state.sqcbHistoryData?.deviceDataList">
      <block v-for="item in state.sqcbHistoryData?.deviceDataList" :key="item.id">
        <p>
          <span>虫害名称：</span><span>{{ item.deviceKeys?.name }}</span>
        </p>
        <p>
          <span>虫害数量：</span><span>{{ item.data }}{{ item.deviceKeys?.unit }}</span>
        </p>
      </block>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { usePullDownRefresh } from '@/hooks/life'
import { ref, onMounted, reactive } from 'vue'
const iconEquipment = require('@/assets/icons/icon_equipment.png')
import { useDidShow, useTabItemTap, useLoad } from '@tarojs/taro'
const dfimage = require('@/assets/icons/dfimage.png')
import { sqcbHistoryInfoData } from '@/services/apis/history'
const state = reactive({
  sqcbHistoryData: {}
})

useLoad(option => {
  console.log(option)
  sqcbHistoryInfoData(option.id).then(data => {
    state.sqcbHistoryData = data.data
  })
})
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
$border-radius: 6px;
$border-color: #eaeaea;
.van-hairline--bottom {
  box-shadow: none;
}
.nut-cell {
  margin: 0;
  padding: 13px 10px;
  box-shadow: none;
  border-radius: 0;
}
.xblock-list {
  .xblock-cell {
    &__title {
      &::before {
        position: absolute;
        content: '';
        top: 50%;
        left: -10px;
        transform: translateY(-50%);
        width: 4px;
        height: 14px;
        background: #4eba64;
        border-radius: 0 3px 3px 0;
      }
    }
  }
  .xblock-content__cell {
    p {
      background: #f3f3f3;
      margin-bottom: 5px;
      // &:nth-child(4n-3) {
      //   background: #f3f3f3;
      // }
      // &:nth-child(4n-2) {
      //   background: #f3f3f3;
      // }
    }
  }
}
</style>
